<template>
  <div class="_wrapper _rel _flex-y _flex-around">
    <div class="video-box _flex-item-1">
      <div
        v-if="aiModelType === 'origin'"
        id="playWnd"
        ref="playWnd"
        class="_page _wrapper playWnd _cart"
      />
      <div class="_wrapper _cart" v-else-if="aiUrl">
        <iframe
          class="_wrapper"
          :src="'http://h5.zzfmhb.com/ai-show.html?aiUrl=' + aiUrl"
          frameborder="0"
        ></iframe>
        <!-- <el-image class="_wrapper" :src="aiUrl" @load="aiImgLoading = false" @error="aiImgLoading = false" :preview-src-list="[aiUrl]">
          <div slot="error" class="_abs-c _text-a-c">
            <i class="el-icon-picture-outline _font" style="font-size: 200px;"></i><br>
            <span class="_font">该环境不支持AI实时分析，请联系工作人员...</span>
          </div>
        </el-image> -->
      </div>
    </div>
    <!-- <button class="_btn-1 _m-t-10" @click="closeVideo">
      断开视频链接
    </button> -->
    <div class="_wrapper _p10 _flex _flex-a-start fun-box _over-hidden">
      <div class="_flex _flex-wrap _flex-around com-btns _m-r-10">
        <el-button @click="videoAction('LEFT_UP')" type="info">左上</el-button>
        <el-button @click="videoAction('UP')" type="primary">上</el-button>
        <el-button @click="videoAction('RIGHT_UP')" type="info">右上</el-button>
        <el-button @click="videoAction('LEFT')" type="primary">左</el-button>
        <el-button @click="videoAction('LEFT', 1)" type="danger"
          >停止</el-button
        >
        <el-button @click="videoAction('RIGHT')" type="primary">右</el-button>
        <el-button @click="videoAction('LEFT_DOWN')" type="info"
          >左下</el-button
        >
        <el-button @click="videoAction('DOWN')" type="primary">下</el-button>
        <el-button @click="videoAction('RIGHT_DOWN')" type="info"
          >右下</el-button
        >
        <el-button @click="videoAction('ZOOM_IN')" type="success"
          >拉近</el-button
        >
        <!--
        <el-button @click="videoAction('START_RECORD_TRACK')">START_RECORD_TRACK</el-button>
        <el-button @click="videoAction('STOP_RECORD_TRACK')">STOP_RECORD_TRACK</el-button>
        <el-button @click="videoAction('START_TRACK')">START_TRACK</el-button>
        <el-button @click="videoAction('STOP_TRACK')">STOP_TRACK</el-button> -->
        <div></div>
        <el-button @click="videoAction('ZOOM_OUT')" type="success"
          >拉远</el-button
        >
        <!-- <el-button @click="videoAction('FOCUS_FAR')" type="warning">光圈扩大</el-button>
        <el-button @click="videoAction('WIPER_SWITCH')" type="warning">雨刷</el-button>
        <el-button @click="videoAction('IRIS_REDUCE')" type="warning">光圈缩小</el-button> -->
      </div>
      <div class="_wrapper-y _m-r-10">
        <div class="_box-scroll _over-scroll-hidden _wrapper-y">
          <div class="_flex _flex-space-x _m-b-5">
            <el-input
              v-model="presetPointName"
              size="small"
              placeholder="请输入预置点名称"
            ></el-input>
            <el-button
              @click="savePresetPoint()"
              size="small"
              type="primary"
              style="padding: 8px"
            >
              保存预置
            </el-button>
          </div>
          <template v-for="item in presetPoints">
            <div
              class="_flex _flex-a-start _flex-start _m-b-5 preset-item el-btns"
            >
              <el-button
                style="width: 150px"
                type="primary"
                size="small"
                @click="
                  movePresetPoint(item.cameraIndexCode, item.presetPointIndex)
                "
              >
                {{ item.presetPointName }}
                ({{
                  (
                    defaultCronConfig.find(
                      (config) =>
                        config.presetPointIndex == item.presetPointIndex
                    ) || {}
                  ).time || "未配置"
                }})
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="
                  removePresetPoint(item.cameraIndexCode, item.presetPointIndex)
                "
                >删除
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="cronConfig(item.cameraIndexCode, item.presetPointIndex)"
                >定时配置
              </el-button>
            </div>
          </template>
        </div>
      </div>
      <div class="_cart _p-b-10">
        <div class="_font-title _font-big _text-a-c _wrapper-x _p10">
          AI视频分析
        </div>
        <el-radio-group v-model="aiModelType" size="small">
          <div class="_flex _flex-wrap _flex-start _flex-space _p10">
            <div v-for="item in $comStore.ai.videoTypeList">
              <el-radio :label="item.val" border>{{ item.name }}</el-radio>
            </div>
          </div>
        </el-radio-group>
      </div>
      <div class="_flex-item-1"></div>
    </div>
    <el-drawer
      title="定时配置"
      v-model="drawer"
      direction="ltr"
      size="20%"
      :destroy-on-close="true"
    >
      <video-cron-config
        :deviceCode="currentDeviceCode"
        :presetPointIndex="currentPresetIndex"
        @close="closeCronConfig"
      />
    </el-drawer>
  </div>
</template>

<script>
import toolHkPlug from "./tool-hk-plug.js";
import hkApi from "./ApiHaikang";
import VideoCronConfig from "./video-cron-config.vue";

export default {
  name: "VideoHk",
  components: {
    VideoCronConfig,
  },
  props: ["cameraIndexCode"],
  data() {
    return {
      drawer: false,
      currentDeviceCode: undefined,
      currentPresetIndex: undefined,
      defaultCronConfig: [],
      presetPoints: [],
      presetPointName: "",
      aiModelType: "origin",
      aiUrl: undefined,
      aiImgLoading: false,
    };
  },
  mounted() {
    this.initVideo(this.cameraIndexCode);
    this.initCronData();
  },
  watch: {
    cameraIndexCode(val) {
      this.initVideo(val);
    },
    aiModelType(val) {
      if (val !== "origin") {
        hkApi
          .getAiRealtimeUrl({
            cameraIndexCode: this.cameraIndexCode,
            aiModeType: val,
          })
          .then((res) => {
            if (res) {
              this.closeVideo();
              this.aiUrl = res.url;
              this.aiImgLoading = true;
            }
          });
      } else {
        this.initVideo(this.cameraIndexCode);
        this.aiUrl = undefined;
      }
    },
  },
  methods: {
    closeCronConfig() {
      hkApi.saveIotDeviceConfig(this.cameraIndexCode).then((res) => {
        if (res && res instanceof Array) {
          this.defaultCronConfig = res;
        }
      });
      this.drawer = false;
    },
    /**
     * cron 定时任务数据初始化
     */
    initCronData() {
      hkApi.saveIotDeviceConfig(this.cameraIndexCode).then((res) => {
        if (res && res instanceof Array) {
          this.defaultCronConfig = res;
        }
      });
    },
    /**
     * 定时规则配置
     * @param {Object} cameraIndexCode
     * @param {Object} presetIndex
     */
    cronConfig(cameraIndexCode, presetIndex) {
      this.currentDeviceCode = cameraIndexCode;
      this.currentPresetIndex = presetIndex;
      this.drawer = true;
    },
    /**
     * 移动到预置点
     * @param {Object} cameraIndexCode
     * @param {Object} presetIndex
     */
    movePresetPoint(cameraIndexCode, presetIndex) {
      hkApi.controlling(this.cameraIndexCode, 0, "GOTO_PRESET", presetIndex);
    },
    /**
     * 删除预置点信息
     * @param {Object} cameraIndexCode
     * @param {Object} presetIndex
     */
    removePresetPoint(cameraIndexCode, presetIndex) {
      hkApi.delPresetPoint(cameraIndexCode, presetIndex).then(() => {
        this.initPresetPointList();
      });
    },
    /**
     * 保存预置点信息
     */
    savePresetPoint() {
      hkApi
        .presetPoint(
          this.cameraIndexCode,
          this.presetPointName,
          this.$random.randomNum(1, 300)
        )
        .then(() => {
          this.initPresetPointList();
        });
    },
    /**
     * 监控云台操作
     * @param {Object} command 动作
     * @param {Object} action 开始0 停止1
     */
    videoAction(command, action = 0) {
      hkApi.controlling(this.cameraIndexCode, action, command);
    },
    closeVideo() {
      toolHkPlug.closeVideo();
    },
    initPresetPointList() {
      hkApi.queryPresetPoint(this.cameraIndexCode).then((res) => {
        this.presetPoints = res;
      });
    },
    initVideo(cameraIndexCode) {
      toolHkPlug.initPlugin(cameraIndexCode, "playWnd", "1x1");
      this.initPresetPointList();
    },
  },
};
</script>

<style scoped>
.video-box {
  width: 100%;
  padding: 10px;
  padding-bottom: 0;
}

.fun-box {
  height: 165px;
}

.preset-item > * {
  margin-right: 5px;
  margin-left: 0;
}

.com-btns {
  width: 240px;
}

.com-btns > * {
  width: 31%;
  margin-left: 0;
  margin-bottom: 5px;
  padding: 8px;
}

.el-btns > * {
  padding: 8px;
}
</style>
